<template>
	<view>
		<view class="container-top">
			<view class="ct-img">
				<img src="@/static/img1.jpg" alt="" style="width: 100%; height: 100%;">
			</view>
			<view class="ct-content">
				<view class="ct-avatar">
					<img :src="userInfo.image" alt="" style="width: 100%; height: 100%;  border-radius: 50%;">
				</view>
				<view class="ct-info">
					<view class="info-name">{{userInfo.name}}</view>
					<view class="info-style" style="display: flex;">
						<view class="info-money" @click="advanceDeposit">预存款：￥ {{saveAccount}} <u-icon
								name="arrow-right"></u-icon></view>
						<view class="ct-change"@click="schoolSwitch">
							<view class="" style="margin-top: 10rpx;">
								<image src="../../../static/index/qiehuan.png" mode="" style=" width: 40rpx;height: 40rpx;"></image>
							</view>
							切换校区
						</view>
					</view>

				</view>

			</view>
			<view class="ct-tip">
				<view class="" style="margin-right: 30rpx;" @click="signCode">
					<image src="../../../static/index/code.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
				</view>
				<view class="" style="margin-right: 30rpx;" @click="studentSwitching">
					<u-icon name="man-add" color="#ffffff" size="40"></u-icon>
				</view>
				<view class="" @click="editInfoBtn">
					<u-icon name="setting" color="#ffffff" size="40"></u-icon>
				</view>

			</view>
		</view>
		<view class="container-centerhas">
			<view class="jifen" @click="pointsMall">
				<view class="jifen-img"><img src="@/static/index/shop.png" alt="" style="width: 100%; height: 100%;"></view>
				<view class="jifen-name">积分商城</view>
			</view>
			<view class="jifen" @click="coueseSelect">
				<view class="jifen-img"><img src="@/static/index/xuanke.png" alt="" style="width: 100%; height: 100%;"></view>
				<view class="jifen-name">选课报名</view>
			</view>
			<view class="jifen" @click="classSchedule">
				<view class="jifen-img"><img src="@/static/index/calendar.png" alt="" style="width: 100%; height: 100%;"></view>
				<view class="jifen-name">排课班级</view>
			</view>
		</view>
		<view class="container-centerHasTwo">
			<view class="jifen" @click="noticeIndex">
				<view class="jifen-img"><img src="@/static/index/gonggao.png" alt="" style="width: 100%; height: 100%;"></view>
				<view class="jifen-name">公告通知</view>
			</view>
			<view class="jifen" @click="classroomWork">
				<view class="jifen-img"><img src="@/static/index/photos.png" alt="" style="width: 100%; height: 100%;"></view>
				<view class="jifen-name">课堂作品</view>
			</view>
			<view class="jifen" @click="auditionBtn">
				<view class="jifen-img"><img src="../../../static/index/shiting2.png" alt="" style="width: 100%; height: 100%;"></view>
				<view class="jifen-name">我的试听</view>
			</view>
		</view>
		<view class="has-course" >
			<view class="hc-top">
				<view class="top-title">已报名课程</view>
				<view class="top-more" @click="applicateCourse">更多<u-icon name="arrow-right"></u-icon></view>
			</view>
			<view class="" v-if="coursesList.length !== 0">
				<view class="hc-content" v-for="(item,index) in coursesList" :key="index" @click="applicateCourseDetail(item)">
					<view class="content-img"><img :src="item.subjectImage" alt=""
							style="width: 100%; height: 100%;border-radius: 8rpx;"></view>
					<view class="content-right">
						<view class="cr-name">{{item.courseName}}</view>
						<view class="cr-class">剩余{{item.leftHour}}课时</view>
						<view class="cr-class">{{item.startTime}}至{{item.stopTime}}</view>
					</view>
				</view>
			</view>
		    <view class="no-course" v-else>
		    	暂无报名课程~
		    </view>

		</view>
		<view class="common-fun">
			<view class="cf-title">
				常用功能
			</view>
			<view class="cf-content">
				<view class="" v-for="(item,index) in commontList" class="commom-content" @click="featureBtn(index)">
					<view class="common-img">
						<img :src="item.img" alt="" style="width: 100%;height: 100%;">
					</view>
					<view class="cf-name">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getApplicationCourseList} from '@/utils/api.js'
	export default {
		props:{
			userInfo:Object
		},
		data() {
			return {
				money: 0.00,
				coursesList:[],
				commontList: [{
						img: '../../../static/index/dingdan.png',
						name: "活动订单"
					},
					{
						img: '../../../static/index/huodong.png',
						name: "精彩活动"
					},
					{
						img: '../../../static/index/youhui.png',
						name: "我的优惠券"
					},
					{
						img: '../../../static/index/qingjia.png',
						name: "请假管理"
					},
					{
						img: '../../../static/index/yuyue.png',
						name: "预约上课"
					},
					{
						img: '../../../static/index/shiting.png',
						name: "我的试听"
					},
					{
						img: '../../../static/index/ketang.png',
						name: "课堂瞬间"
					},
					{
						img: '../../../static/index/jizan.png',
						name: "积赞排行"
					},
				],
				saveAccount:uni.getStorageSync('trainneInfo')?Number(uni.getStorageSync('trainneInfo').saveAccount) :0.00,
				trainneInfo:uni.getStorageSync('trainneInfo')
			}
		},
		
		
		methods: {
		
			async getApplicationCourseList() {
				if (!uni.getStorageSync('token')) {
					uni.redirectTo({
						url: '/pages/autoLogin/autoLogin'
					})
					return
				}
				uni.showLoading()
				const data = {
					pageSize:999,
					pageNum:1
				}
				const res = await getApplicationCourseList(data)
				if (res.code == 200) {
					uni.hideLoading()
					this.coursesList = res.rows
				}
			},
			applicateCourseDetail(e){
				uni.navigateTo({
						url: `/pages/course/checkDetails?id=${e.id}&courseName=${e.courseName}`
					})	
			},
			schoolSwitch(){

				uni.navigateTo({
						url: '/pages/index/schoolSwitching'
					})	
			},
			advanceDeposit() {
				uni.navigateTo({
					url: '/pages/index/advanceDeposit'
				})
			},
			pointsMall() {
				uni.navigateTo({
					url: '/pages/info/pointsMall'
				})
			},
			editInfoBtn() {
				uni.navigateTo({
					url: '/pages/my/editInfo'
				})
			},
			studentSwitching() {
				uni.navigateTo({
					url: '/pages/my/studentSwitching'
				})
			},
			signCode() {
				uni.navigateTo({
					url: '/pages/my/signCode'
				})
			},
			coueseSelect() {
				uni.navigateTo({
					url: '/pages/course/courseSelection'
				})
			},
			classSchedule() {
				uni.navigateTo({
					url: '/pages/course/classSchedule'
				})
			},
			noticeIndex() {
				uni.navigateTo({
					url: '/pages/noticeIndex/noticeIndex'
				})
			},
			classroomWork() {
				uni.navigateTo({
					url: '/pages/index/classroomWorks'
				})
			},
			auditionBtn(){
				uni.navigateTo({
					url: '/pages/my/audition'
				})
			},
			applicateCourse() {
				uni.navigateTo({
					url: '/pages/course/applicateCourse'
				})
			},
			featureBtn(index) {
				if(index === 0){
					uni.navigateTo({
						url: '/pages/feature/activityOrders'
					})
				}else if(index === 1){
					uni.navigateTo({
						url: '/pages/index/excitingActivities'
					})
				}
				else if (index == 2) {
					uni.navigateTo({
						url: '/pages/my/coupon'
					})
				}else if(index == 3){
					uni.navigateTo({
						url: '/pages/my/leaveManagement'
					})
				}else if(index === 4){
					uni.navigateTo({
						url: '/pages/feature/scheduleClasses'
					})
				}else if(index ===5) {
					uni.navigateTo({
						url: '/pages/my/audition'
					})
					
				}else if(index === 6){
					uni.navigateTo({
						url: '/pages/feature/classMoments'
					})
				}else if(index ===7){
					uni.navigateTo({
						url: '/pages/feature/accumulateRanking'
					})
				}
			}

		},
		created() {
			this.getApplicationCourseList()
		},
		
	}
</script>

<style>
	.container-top {
		position: relative;
	}

	.ct-img {
		width: 100%;
		height: 300rpx;
	}

	.ct-content {
		display: flex;
		justify-content: start;
		position: absolute;
		top: 30rpx;
		width: 100%;
	}

	.ct-avatar {
		width: 100rpx;
		height: 100rpx;
		margin-left: 40rpx;

	}

	.ct-info {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.info-name {
		color: #ffffff;
		margin-left: 20rpx;
	}

	.info-money {
		margin-top: 10rpx;
		width: 200rpx;
		height: 50rpx;
		text-align: center;
		font-size: 22rpx;
		line-height: 50rpx;
		color: #000000;
		background-color: #fad667;
		border-radius: 50rpx;
	}

	.ct-tip {
		position: absolute;
		right: 40rpx;
		top: 20rpx;
		display: flex;
	}

	.container-centerhas {
		width: 95%;
		background-color: #ffffff;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 180rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 60rpx;
	}

	.jifen-img {
		width: 80rpx;
		height: 80rpx;
		margin: 10rpx auto;
	}

	.jifen-name {}

	.container-centerHasTwo {
		width: 95%;
		background-color: #ffffff;
		margin: 0 auto;
		margin-top: 90rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 60rpx;
		border-radius: 30rpx;
	}

	.has-course {
		width: 95%;
		margin: 20rpx auto;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.hc-top {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		padding-top: 30rpx;
	}

	.top-title {
		font-weight: bold;
	}

	.top-more {
		color: #000000;
		font-size: 22rpx;
	}

	.hc-content {
		display: flex;
		margin-left: 20rpx;
		padding-bottom: 30rpx;
	}

	.content-img {
		width: 100rpx;
		height: 100rpx;
	}

	.content-right {
		margin-left: 20rpx;
	}

	.cr-name {
		font-weight: bold;

	}

	.cr-class {
		color: #7b7b7b;
		font-size: 24rpx;
		margin-top: 5rpx;
	}

	.cf-content {
		display: flex;
		flex-wrap: wrap;

		margin-top: 20rpx;

	}

	.common-fun {
		width: 95%;
		margin: 20rpx auto;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.cf-title {
		font-weight: bold;
		margin-left: 20rpx;
		padding-top: 30rpx;
	}

	.common-img {
		width: 50rpx;
		height: 50rpx;
		margin: 0 auto;
	}

	.commom-content {
		width: 19%;
		margin-right: 20rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.cf-name {
		font-size: 24rpx;
		text-align: center;
		margin-top: 10rpx;

	}

	.ct-change {
		width: 180rpx;
		height: 55rpx;
		background-color: #0c1f30;
		color: #fcfcfc;
		font-size: 24rpx;
		text-align: center;
		line-height: 55rpx;
		border-radius: 40rpx;
		margin-left: 40rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-around;


	}
	.no-course{
		text-align: center;
		padding: 50rpx;
		color: #7b7b7b;
	}
</style>